import {PlButton, PlButtonGroup, PlColorPicker, PlFormItem, PlInput, PlNumber, PlSelect, PlSelectOption, PlTag, PlToggle} from "plain-design";
import {iVisualComponentConfig} from "../../packages";
import {tComponentConfig} from "../../packages/createVisualEditorUser/createVisualEditorComponent/createVisualEditorComponentConfig";
import {tVisualEditorBinding} from "../../packages/createVisualEditorUser/createVisualEditorBinding/createVisualEditorBinding";
import {PickProduct} from "../../components/PickProduct";
import {tVisualEditorMethods} from "../../packages/createVisualEditorUser/useVisualEditorMethods";

/**
 * 定义组件配置，只在编辑内容的时候用到，预渲染或者说预览的时候不需要
 * @author  韦胜健
 * @date    2022/2/6 11:50
 */
export function predefineComponentConfig({ config: { registryComponentConfig }, binding: { config: { BindingEditor } }, methods }: { config: tComponentConfig, binding: tVisualEditorBinding, methods: tVisualEditorMethods }) {
  /*---------------------------------------可用组件-------------------------------------------*/
  registryComponentConfig({ group: '可用组件', name: '图片_1', component: createImageComponent('http://1.116.13.72/web/upload_file/20211223150351_7bd7769e-63be-11ec-8add-525400138871/adidas-shoes2.png', BindingEditor, methods) });
  registryComponentConfig({ group: '可用组件', name: '图片_2', component: createImageComponent('http://1.116.13.72/web/upload_file/20211223150111_1cc8fb12-63be-11ec-8add-525400138871/adidas-shoes.png', BindingEditor, methods) });
  registryComponentConfig({ group: '可用组件', name: '图片_3', component: createImageComponent('http://1.116.13.72/web/upload_file/20211221015637_2d8c4598-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87.png', BindingEditor, methods) });
  registryComponentConfig({ group: '可用组件', name: '图片_4', component: createImageComponent('http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png', BindingEditor, methods) });
  registryComponentConfig({ group: '可用组件', name: '图片_5', component: createImageComponent('http://1.116.13.72/web/upload_file/20211227222454_c26ec888-6720-11ec-8add-525400138871/222.png', BindingEditor, methods) });

  registryComponentConfig({
    group: '可用组件', name: '按钮', component: {
      code: 'button',
      preview: () => (
        <img
          src="http://1.116.13.72/web/upload_file/20211223144240_86081321-63bb-11ec-8add-525400138871/filter_button.png"
          style={{
            width: "100%",
            objectFit: 'contain',
          }}
        />
      ),
      defaultData: {
        style: {
          display: 'inline-block',
        },
        data: {
          text: '按钮文案',
          mode: 'dark',
          size: 'large',
          width: '200px',
          arrow: true,
        }
      },
      config: ({ registry }) => {

        const buttonModeOptions = [
          { label: '亮色按钮', val: 'light' },
          { label: '深色按钮', val: 'dark' },
        ];
        const buttonSizeOptions = [
          { label: '大', val: 'large' },
          { label: '中', val: 'normal' },
          { label: '小', val: 'small' },
        ];

        registry({
          name: '按钮设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="按钮文本">
                <BindingEditor v-model={editData.data.text} data={editData}>
                  <PlInput v-model={editData.data.text}/>
                </BindingEditor>
              </PlFormItem>
              <PlFormItem label="按钮类型">
                <PlSelect v-model={editData.data.mode}>
                  {buttonModeOptions.map(item => (
                    <PlSelectOption key={item.val} label={item.label} val={item.val}/>
                  ))}
                </PlSelect>
              </PlFormItem>
              <PlFormItem label="按钮大小">
                <PlSelect v-model={editData.data.size}>
                  {buttonSizeOptions.map(item => (
                    <PlSelectOption key={item.val} label={item.label} val={item.val}/>
                  ))}
                </PlSelect>
              </PlFormItem>
              <PlFormItem label="按钮宽度">
                <PlInput v-model={editData.data.width}/>
              </PlFormItem>
              <PlFormItem label="显示箭头">
                <PlToggle v-model={editData.data.arrow}/>
              </PlFormItem>
            </>
          )
        });
      },
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '多列容器', component: {
      code: 'column-container',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
      defaultData: {
        style: {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'stretch',
          justifyContent: 'flex-start',
        },
        data: {
          columnNum: 3,
        },
        childrenData: [],
      },
      config: ({ registry }) => {
        registry({
          name: '容器设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="列数">
                <PlNumber v-model={editData.data.columnNum}/>
              </PlFormItem>
              <PlFormItem label="列间距">
                <PlNumber v-model={editData.data.gutter}/>
              </PlFormItem>
            </>
          )
        });
      },
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '多行容器', component: {
      code: 'rows-container',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
      defaultData: {
        style: {
          display: 'block',
        },
        data: {
          rowsNum: 3,
        },
        childrenData: [],
      },
      config: ({ registry }) => {
        registry({
          name: '容器设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="行数">
                <PlNumber v-model={editData.data.rowsNum}/>
              </PlFormItem>
              <PlFormItem label="列间距">
                <PlNumber v-model={editData.data.gutter}/>
              </PlFormItem>
            </>
          )
        });
      },
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '轮播容器', component: {
      code: 'carousel-container',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
      defaultData: {
        data: {
          carouselNum: 3,
          height: 500,
          autoplay: true,
          hideButton: false,
          loop: true,
        },
        readonlyData: {
          activeIndex: 0,
        },
        childrenData: [],
      },
      config: ({ registry }) => {
        registry({
          name: '容器设置',
          render: ({ editData, data }) => (
            <>
              <PlFormItem label="轮播页数"><PlNumber v-model={editData.data.carouselNum}/></PlFormItem>
              <PlFormItem label="轮播高度"><PlNumber v-model={editData.data.height}/></PlFormItem>
              <PlFormItem label="自动播放"><PlToggle v-model={editData.data.autoplay}/></PlFormItem>
              <PlFormItem label="隐藏按钮"><PlToggle v-model={editData.data.hideButton}/></PlFormItem>
              <PlFormItem label="无限滚动"><PlToggle v-model={editData.data.loop}/></PlFormItem>
              <PlFormItem label="翻页设置">
                <PlButtonGroup size="mini">
                  <PlButton label="上一页" onClick={() => {data.readonlyData.activeIndex > 0 && (data.readonlyData.activeIndex--);}}/>
                  <PlButton label="下一页" onClick={() => {data.readonlyData.activeIndex < data.data.carouselNum - 1 && (data.readonlyData.activeIndex++);}}/>
                </PlButtonGroup>
              </PlFormItem>
            </>
          )
        });
      },
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '固定容器', component: {
      code: 'fixed-size-container',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
      config: ({ registry }) => {},
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '正方形容器', component: {
      code: 'square-container',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
      config: ({ registry }) => {},
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '文字', component: {
      code: 'text',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_329319b9-61c1-11ec-8add-525400138871/text.png',
      defaultData: {
        data: {
          text: '默认文本',
        },
        style: {
          display: 'inline-block',
          fontSize: '16px',
          fontWeight: '500',
          padding: '10px 20px',
          color: 'black',
        },
      },
      config: ({ registry }) => {
        registry({
          name: '文字设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="文字内容">
                <BindingEditor v-model={editData.data.text} data={editData}>
                  <PlInput v-model={editData.data.text}/>
                </BindingEditor>
              </PlFormItem>
              <PlFormItem label="文字大小"><PlInput v-model={editData.style.fontSize}/></PlFormItem>
              <PlFormItem label="文字粗细"><PlNumber v-model={editData.style.fontWeight} step={100}/></PlFormItem>
              <PlFormItem label="文字颜色"><PlColorPicker v-model={editData.style.color}/></PlFormItem>
            </>
          )
        });
      },
    }
  });
  registryComponentConfig({
    group: '可用组件', name: '视频', component: {
      code: 'video',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221020103_cbfa0019-61be-11ec-8add-525400138871/videotape_one.svg',
      defaultData: {
        data: {
          url: 'https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg2.mp4',
          height: '',
          width: '100%',
          autoplay: true,
        },
        style: {
          width: '100%'
        },
      },
      config: ({ registry }) => {
        registry({
          name: '视频设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="视频地址"><PlInput v-model={editData.data.url}/></PlFormItem>
              <PlFormItem label="视频宽度"><PlInput v-model={editData.data.width}/></PlFormItem>
              <PlFormItem label="视频高度"><PlInput v-model={editData.data.height}/></PlFormItem>
              <PlFormItem label="自动播放"><PlToggle v-model={editData.data.autoplay}/></PlFormItem>
            </>
          )
        });
      },
    }
  });

  registryComponentConfig({
    group: '可用组件',
    name: '商品列表',
    component: {
      code: 'product-list',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
      defaultData: {
        data: {
          // 商品列表数据
          list: [] as unknown[],
          // 是否处于编辑模板的模式
          isEditingTemplate: true,
          // 列数
          column: 2,
          // 列间隔
          gutter: '2px',
        },
        style: {
          width: '100%',
        },
      },
      config: ({ registry }) => {
        registry({
          name: '列表设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="列数">
                <PlNumber v-model={editData.data.column}/>
              </PlFormItem>
              <PlFormItem label="间隔">
                <PlInput v-model={editData.data.gutter}/>
              </PlFormItem>
              <PlFormItem label="编辑模板">
                <PlToggle v-model={editData.data.isEditingTemplate}/>
              </PlFormItem>
              <PlFormItem label="绑定数据">
                <PickProduct
                  label="添加绑定商品"
                  icon="el-icon-plus"
                  multiple
                  v-model={editData.data.list}
                />
              </PlFormItem>
              <div style={{ padding: '4px 10px' }}>
                {(editData.data.list as any[]).map((item, index) => (
                  <PlTag style={{ margin: '0 4px 4px 0' }} size="mini" close key={index} label={item.name} onClose={() => editData.data.list.splice(index, 1)}/>
                ))}
              </div>
            </>
          )
        });
      }
    },
  });

  registryComponentConfig({
    group: '可用组件',
    name: '热区容器',
    component: {
      code: 'range-container',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
    }
  });

  registryComponentConfig({
    group: '可用组件',
    name: '热区节点',
    component: {
      code: 'range-item',
      previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
    }
  });

  // /*组合组件的位置*/
  // registryComponentConfig('组合组件')

  /*/!*---------------------------------------容器组件-------------------------------------------*!/
  registryComponentConfig({ group: '容器组件', name: '普通容器', component: { code: '普通容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221012528_d382778c-61b9-11ec-8add-525400138871/%E6%99%AE%E9%80%9A%E5%AE%B9%E5%99%A8.svg' } });
  registryComponentConfig({ group: '容器组件', name: '宫格容器', component: { code: '宫格容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221015748_5780e5d8-61be-11ec-8add-525400138871/browser-grid.svg' } });
  registryComponentConfig({ group: '容器组件', name: '正方形容器', component: { code: '正方形容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221023400_66115a5a-61c3-11ec-8add-525400138871/square.png' } });
  registryComponentConfig({ group: '容器组件', name: '多列容器', component: { code: '多列容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png' } });
  registryComponentConfig({ group: '容器组件', name: '卡片容器', component: { code: '卡片容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221020019_b1f016e6-61be-11ec-8add-525400138871/Pay_with_card.svg' } });
  registryComponentConfig({ group: '容器组件', name: '选项卡容器', component: { code: '选项卡容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221020014_aea8ef7e-61be-11ec-8add-525400138871/operate.svg' } });
  registryComponentConfig({ group: '容器组件', name: '折叠容器', component: { code: '折叠容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221022823_9daafc67-61c2-11ec-8add-525400138871/collapse.png' } });

  /!*---------------------------------------媒体组件-------------------------------------------*!/
  registryComponentConfig({ group: '媒体组件', name: '音频', component: { code: '音频', previewImage: 'http://1.116.13.72/web/upload_file/20211221020003_a8084131-61be-11ec-8add-525400138871/music.svg' } });
  registryComponentConfig({ group: '媒体组件', name: '视频', component: { code: '视频', previewImage: 'http://1.116.13.72/web/upload_file/20211221020103_cbfa0019-61be-11ec-8add-525400138871/videotape_one.svg' } });
  registryComponentConfig({ group: '媒体组件', name: '地图', component: { code: '地图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015958_a55d8b8a-61be-11ec-8add-525400138871/-map.svg' } });
  registryComponentConfig({ group: '媒体组件', name: '图片', component: { code: '图片', previewImage: 'http://1.116.13.72/web/upload_file/20211221021804_2c676e7a-61c1-11ec-8add-525400138871/New_img.png', } });
  registryComponentConfig({ group: '媒体组件', name: '文件', component: { code: '文件', previewImage: 'http://1.116.13.72/web/upload_file/20211221021759_29a1aa15-61c1-11ec-8add-525400138871/filesimg.png' } });
  /!*---------------------------------------图表组件-------------------------------------------*!/
  registryComponentConfig({ group: '图表组件', name: '面积图', component: { code: '面积图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015618_2217cabf-61be-11ec-8add-525400138871/%E9%9D%A2%E7%A7%AF%E5%9B%BE.png' } });
  registryComponentConfig({ group: '图表组件', name: '柱状图', component: { code: '柱状图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015711_41a4c5b4-61be-11ec-8add-525400138871/%E6%9F%B1%E7%8A%B6%E5%9B%BE.png' } });
  registryComponentConfig({ group: '图表组件', name: '漏斗图', component: { code: '漏斗图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015615_207d80a2-61be-11ec-8add-525400138871/%E6%BC%8F%E6%96%97%E5%9B%BE.png' } });
  registryComponentConfig({ group: '图表组件', name: '折线图', component: { code: '折线图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015704_3d9f0cea-61be-11ec-8add-525400138871/%E6%8A%98%E7%BA%BF%E5%9B%BE.png' } });
  registryComponentConfig({ group: '图表组件', name: '饼图', component: { code: '饼图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015510_f9c5a439-61bd-11ec-8add-525400138871/%E9%A5%BC%E5%9B%BE.png' } });
  /!*---------------------------------------其他组件-------------------------------------------*!/
  registryComponentConfig({ group: '其他组件', name: '商品卡片', component: { code: '商品卡片', previewImage: 'http://1.116.13.72/web/upload_file/20211221015637_2d8c4598-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87.png' } });
  registryComponentConfig({ group: '其他组件', name: '横幅', component: { code: '横幅', previewImage: 'http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png' } });
  registryComponentConfig({ group: '其他组件', name: '推荐列表', component: { code: '推荐列表', previewImage: 'http://1.116.13.72/web/upload_file/20211221015641_2f8ab077-61be-11ec-8add-525400138871/%E6%8E%A8%E8%8D%90%E5%88%97%E8%A1%A8.png' } });
  registryComponentConfig({ group: '其他组件', name: '活动', component: { code: '活动', previewImage: 'http://1.116.13.72/web/upload_file/20211221015516_fd0d8966-61bd-11ec-8add-525400138871/%E6%B4%BB%E5%8A%A8.png' } });
  registryComponentConfig({ group: '其他组件', name: '商品大类', component: { code: '商品大类', previewImage: 'http://1.116.13.72/web/upload_file/20211221015634_2ba80879-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%A4%A7%E7%B1%BB.png' } });

  registryComponentConfig({ group: '其他组件', name: '登陆表单', component: { code: '登陆表单', previewImage: 'http://1.116.13.72/web/upload_file/20211221015507_f7ddac5f-61bd-11ec-8add-525400138871/%E8%A1%A8%E5%8D%95.png' } });
  registryComponentConfig({ group: '其他组件', name: '注册表单', component: { code: '注册表单', previewImage: 'http://1.116.13.72/web/upload_file/20211221015707_3f91b4ca-61be-11ec-8add-525400138871/%E6%B3%A8%E5%86%8C.png' } });
  registryComponentConfig({ group: '其他组件', name: '商城模板', component: { code: '商城模板', previewImage: 'http://1.116.13.72/web/upload_file/20211221015626_26983540-61be-11ec-8add-525400138871/%E5%95%86%E5%9F%8E%E6%A8%A1%E6%9D%BF.png' } });
  registryComponentConfig({ group: '其他组件', name: '未命名_1', component: { code: '未命名_1', previewImage: 'http://1.116.13.72/web/upload_file/20211221015657_38a88e52-61be-11ec-8add-525400138871/%E6%9C%AA%E5%91%BD%E5%90%8D_1.png' } });
  registryComponentConfig({ group: '其他组件', name: '未命名_2', component: { code: '未命名_2', previewImage: 'http://1.116.13.72/web/upload_file/20211221015700_3b55d3ea-61be-11ec-8add-525400138871/%E6%9C%AA%E5%91%BD%E5%90%8D_2.png' } });
  /!*---------------------------------------基础组件-------------------------------------------*!/
  registryComponentConfig({ group: '基础组件', name: '输入框', component: { code: '输入框', previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_ad00d1f9-61c1-11ec-8add-525400138871/text.png' } });
  registryComponentConfig({ group: '基础组件', name: '多行输入', component: { code: '多行输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_329319b9-61c1-11ec-8add-525400138871/text.png' } });
  registryComponentConfig({ group: '基础组件', name: '密码输入', component: { code: '密码输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221021806_2dc563af-61c1-11ec-8add-525400138871/password.png' } });
  registryComponentConfig({ group: '基础组件', name: '数字输入', component: { code: '数字输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221020009_abdc8e74-61be-11ec-8add-525400138871/number.svg' } });
  registryComponentConfig({ group: '基础组件', name: '评分输入', component: { code: '评分输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_328efad2-61c1-11ec-8add-525400138871/star.png' } });
  registryComponentConfig({ group: '基础组件', name: '滑动条', component: { code: '滑动条', previewImage: 'http://1.116.13.72/web/upload_file/20211221020047_c21e2009-61be-11ec-8add-525400138871/sliders.svg' } });
  registryComponentConfig({ group: '基础组件', name: '选择框', component: { code: '选择框', previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png' } });
  registryComponentConfig({ group: '基础组件', name: '树形选择', component: { code: '树形选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221020025_b5244ca8-61be-11ec-8add-525400138871/reporting-tree_select-32.svg' } });
  registryComponentConfig({ group: '基础组件', name: '级联选择', component: { code: '级联选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221015938_99495e01-61be-11ec-8add-525400138871/Collapse.svg' } });
  registryComponentConfig({ group: '基础组件', name: '穿梭框', component: { code: '穿梭框', previewImage: 'http://1.116.13.72/web/upload_file/20211221021757_28541bdc-61c1-11ec-8add-525400138871/Exchange.png' } });
  registryComponentConfig({ group: '基础组件', name: '复选框组', component: { code: '复选框组', previewImage: 'http://1.116.13.72/web/upload_file/20211221021754_26d0f620-61c1-11ec-8add-525400138871/checkbox.png' } });
  registryComponentConfig({ group: '基础组件', name: '单选框组', component: { code: '单选框组', previewImage: 'http://1.116.13.72/web/upload_file/20211221021809_2f35e5c2-61c1-11ec-8add-525400138871/radio.png' } });
  registryComponentConfig({ group: '基础组件', name: '日期选择', component: { code: '日期选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221015946_9de17765-61be-11ec-8add-525400138871/date.svg' } });
  registryComponentConfig({ group: '基础组件', name: '日期范围', component: { code: '日期范围', previewImage: 'http://1.116.13.72/web/upload_file/20211221021801_2ae87da4-61c1-11ec-8add-525400138871/filter_date.png' } });
  registryComponentConfig({ group: '基础组件', name: '时间选择', component: { code: '时间选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_32947b59-61c1-11ec-8add-525400138871/Time_icon.png' } });
  registryComponentConfig({ group: '基础组件', name: '时间范围', component: { code: '时间范围', previewImage: 'http://1.116.13.72/web/upload_file/20211221020108_cee45bee-61be-11ec-8add-525400138871/wd-applet-enter-time.svg' } });
  registryComponentConfig({ group: '基础组件', name: '上传', component: { code: '上传', previewImage: 'http://1.116.13.72/web/upload_file/20211221020058_c91bb90a-61be-11ec-8add-525400138871/Upload.svg' } });
  registryComponentConfig({ group: '基础组件', name: '拖拽上传', component: { code: '拖拽上传', previewImage: 'http://1.116.13.72/web/upload_file/20211221015951_a0d97867-61be-11ec-8add-525400138871/drag-drop.svg' } });
  registryComponentConfig({ group: '基础组件', name: '开关', component: { code: '开关', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_3291a5e6-61c1-11ec-8add-525400138871/switch-01.png' } });*/
}

const createImageComponent = (defaultUrl: string, BindingEditor: any, methods: tVisualEditorMethods): Omit<iVisualComponentConfig, 'group' | 'name'> => ({
  code: 'image',
  previewImage: defaultUrl,
  defaultData: {
    data: {
      /*图片地址*/
      url: defaultUrl,
      /*图片宽度*/
      width: '100%',
      /*图片高度*/
      height: null,
      /*图片覆盖方式*/
      objectFit: null,
      /*图片位置*/
      objectPosition: null,
      /*是否有覆盖内容*/
      hasCover: false,
    }
  },
  config: ({ registry }) => {
    registry({
      name: '图片设置',
      render: ({ editData, data, apply }) => (
        <>
          <PlFormItem label="图片地址">
            <BindingEditor v-model={editData.data.url} data={editData}>
              <PlInput v-model={editData.data.url}/>
            </BindingEditor>
          </PlFormItem>
          <PlFormItem label="图片宽度">
            <PlInput v-model={editData.data.width}/>
          </PlFormItem>
          <PlFormItem label="图片高度">
            <PlInput v-model={editData.data.height}/>
          </PlFormItem>
          <PlFormItem label="覆盖方式">
            <PlSelect v-model={editData.data.objectFit}>
              {['fill', 'contain', 'cover', 'none', 'scale-down'].map(item => (
                <PlSelectOption label={item} key={item} val={item}/>
              ))}
            </PlSelect>
          </PlFormItem>
          <PlFormItem label="图片位置">
            <PlSelect v-model={editData.data.objectPosition}>
              {[
                'top',
                'bottom',
                'left',
                'right',
                'center',
                'top left',
                'top right',
                'bottom left',
                'bottom right',
              ].map(item => (
                <PlSelectOption label={item} key={item} val={item}/>
              ))}
            </PlSelect>
          </PlFormItem>
          {/*<PlFormItem label="覆盖内容">
            <PlToggle v-model={editData.data.hasCover}/>
          </PlFormItem>*/}
          <PlFormItem label="添加覆盖">
            <PlButton label="添加" icon="el-icon-plus" onClick={async () => {
              data.childrenData = [
                ...data.childrenData || [],
                await methods.createComponentData({
                  name: '固定容器',
                  group: '可用组件',
                  code: 'fixed-size-container',
                }),
              ];
              apply(true);
            }}/>
          </PlFormItem>
          <PlFormItem label="添加热区">
            <PlButton label="添加" icon="el-icon-plus" onClick={async () => {
              data.childrenData = [
                ...data.childrenData || [],
                await methods.createComponentData({
                  name: '热区容器',
                  group: '可用组件',
                  code: 'range-container',
                }),
              ];
              apply(true);
            }}/>
          </PlFormItem>
        </>
      )
    });
  },
});
